<template>
	<view>
		<view class="content">
			<view class="head_img">
				<view @click="upload_image">
					<view class="white"></view>
					<image :src="list.outimg" class="img"></image>
				</view>
			</view>
			<view class="item_info" v-for="(item, index) in label_value" :key="index" @click="$to('/pages/mine/edit')">
				<view class="left">
					<view class="label">{{ item.label }}</view>
					<view class="value" v-if="item.value == 'gender_text'">{{ list[item.value] }}</view>
					<view class="value" v-else-if="item.value == 'address'">{{ list[item.value] || '未填写' }}</view>
					<view class="value" v-else>{{ list[item.value] }}</view>
				</view>
				<u-icon name="arrow-right" class="right" color="#878D99"></u-icon>
			</view>
			<view class="btn_exit" @click="exit">退出登录</view>
		</view>
		<u-tabbar height="110rpx" v-model="current" :list="tabbar.list" :active-color="tabbar.active_color" :inactive-color="tabbar.inactive_color"></u-tabbar>
	</view>
</template>

<script>
import tabbar from '@/tabbar.js';
import { my_info, edit_image, upload_outimg } from '@/api/user.js';
export default {
	data() {
		return {
			share: false,
			current: 2,
			tabbar: tabbar,
			list: {},
			label_value: [
				{
					label: '昵称',
					value: 'name'
				},
				{
					label: '性别',
					value: 'gender_text'
				},
				{
					label: '地区',
					value: 'address'
				},
				{
					label: '个人介绍',
					value: 'description'
				}
			]
		};
	},
	onShow() {
		this.getUserInfo();
	},
	onLoad() {
		uni.$on('update_user_info', () => {
			console.log('刷新');
			this.getUserInfo();
		});
	},
	methods: {
		upload_image() {
			//头像
			uni.chooseImage({
				success: chooseImageRes => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					uni.showLoading({
						title: '上传图片中...'
					});
					uni.uploadFile({
						url: upload_outimg,
						filePath: tempFilePaths[0],
						name: 'file',
						success: file => {
							console.log(file);
							let obj = JSON.parse(file.data);
							if (obj.code == 200) {
								edit_image(obj.data)
									.then(res => {
										console.log(res, '修改头像');
										uni.hideLoading();
										if (res.code == 200) {
											this.list.outimg = obj.data;
											uni.$emit('update_user_info'); //更新资料
											uni.showToast({
												title: res.data,
												icon: 'success'
											});
										} else {
											uni.showToast({
												title: res.data,
												icon: 'error'
											});
										}
									})
									.catch(err => {
										uni.hideLoading();
										uni.showToast({
											title: '图片上传失败',
											icon: 'error'
										});
									});
							} else {
								uni.hideLoading();
								uni.showToast({
									title: '图片上传失败',
									icon: 'error'
								});
							}
						}
					});
				}
			});
		},
		getUserInfo() {
			//获取用户信息
			my_info().then(res => {
				if (res.code == 200) {
					this.list = res.data;
					uni.setStorageSync('userInfo', res.data);
				} else {
				}
			});
		},
		exit() {
			//退出登录 清空缓存区
			uni.showModal({
				title: '温馨提示',
				content: '退出将清除本地登陆的所有数据？',
				cancelText: '下次一定',
				confirmText: '退出',
				success: function(res) {
					if (res.confirm) {
						uni.removeStorageSync('userInfo');
						uni.removeStorageSync('token');
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/index' //返回首页
							});
						}, 600);
					} else if (res.cancel) {
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	.btn_exit {
		margin: 80rpx 40rpx 40rpx;
		border-radius: 50rpx;
		padding: 20rpx 0;
		text-align: center;
		color: #a4a4a4;
		border: 1rpx solid #dbdbdb;
		&:active {
			background-color: #f4f4f4;
		}
	}
	.head_img {
		font-size: 0;
		display: flex;
		padding: 50rpx 0;
		> view {
			margin: auto;
			position: relative;
			&:active {
				.white {
					background-color: rgba(255, 255, 255, 0.2);
				}
			}
			.white {
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				border-radius: 50%;
				z-index: 10;
			}
		}
		.img {
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			box-shadow: 0 4rpx 0 8rpx #fff, 0 12rpx 35rpx 4rpx rgba(0, 0, 0, 0.3);
		}
	}
	.item_info {
		display: flex;
		padding: 40rpx;
		position: relative;
		transition: 0.3s;
		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 40rpx;
			right: 40rpx;
			border-bottom: 1rpx solid #eee;
			z-index: 1;
		}
		&:active {
			background-color: #f4f4f4;
		}
		.left {
			.label {
				color: #a4a4a4;
				font-size: 24rpx;
			}
			.value {
				padding-top: 20rpx;
				font-size: 32rpx;
				color: #000;
			}
		}
		.right {
			margin: auto 0 auto auto;
		}
	}
}
</style>
